<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mini vue</title>
</head>
<body>
  <div id="app">
      <h1>v-html</h1>
      <div v-html="msg"></div>
      <h1>v-on</h1>
      <div v-on:click="handleClick">请点击我</div>
  </div>
</body>
<script src="./dep.js"></script>
<script src="./watcher.js"></script>
<script src="./compile.js"></script>
<script src="./observer.js"></script>
<script src="./miniVue.js"></script>
<script>
  let data = {
    msg: '我是一条消息'
  }

  // Object.defineProperty(data, 'msg', {
  //   enumerable: true,
  //   configurable: true,
  //   get() {
  //     return data.msg // 会构成死循环
  //   },
  //   set(val) {
  //     data.msg = val
  //   }
  // })
  let vm = new MiniVue({
    el: '#app',
    data: {
      msg: '<div style="color:#ff0000">我是一条红色的消息</div>'
    },
    methods: {
      handleClick() {
        alert('我是点击事件')
      }
    },
  })
</script>
</html>